<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>摄影师招募</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			.mui-control-content {
				background-color: white;
				min-height: 50rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 80px;
				    max-width: 110px;
			}
			.mui-bar-nav{
					background-color: #e94709;
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					    width: 75%;					
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;						
							}
					/* 公共部分end */
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.addtime{
				padding-top: 10px;
				font-size: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				    margin-right: 25px;
			}
			.mui-content>.mui-table-view:first-child{
				margin: 0;
			}
			.mui-content ul{
				height: 6.5rem;
			}
			
			.entry-pro {
				font-weight: 520;
				font-size: 15px;
				color: #000000;
				background-color: #FFFFFF;
				padding: 10px 0 1px 5%;
				
			}
			.entry-message{
				position: absolute;
				    width: 100%;
				    height: 80%;
				font-weight: 520;
				font-size: 15px;
				color: #000000;
				background-color: #FFFFFF;
				padding: 10px 5% 1px 5%;
			}
			.entry-message input{
				height: 30px;
			}
			.entry-message p{
				margin-top: 3%;
				margin-bottom: 1px;
			}
			.entry-message input::-webkit-input-placeholder{			
			font-size:14px;	
			color: #bcbcbc;
			}
			.entry-select{
				position: absolute;
				width: 95%;
				height: 4%;
				border: 1px solid #bcbcbc;
				margin-bottom: 10px;
			}
			.mui-btn-block{
				font-size: 14px;
				margin: 0;
				padding: 0;
				padding-left: 4%;
				line-height: 25px;
				color: #000000;
			}
			.mui-btn-block option:first-child{
				font-size: 14px;
				margin: 0;
				padding: 0;
				color: #bcbcbc;
			}
			    .circle{
			           width: 15px;
			               height: 15px;
			               background-color: #595757;
			               border-radius: 50%;
			               display: inline-block;
			               margin-right: 30px;
			               float: right;
			               text-align: center;
			               line-height: 5px;
						   color:#595757 ;
						   letter-spacing: 0;
			        }
				.circle-active{
					background-color: #e94709;
					color: #e94709;
				}
				.entry-message .phone-code{
					float: right;
					margin-right: 5%;
					background-color:#e94709 ;
					color: #FFFFFF;
					 border-radius: 4px;
					 font-size: 10px;
					 width: 23%;
					 text-align: center;
					}
				.id-card{
					position: absolute;
					width: 95%;
					height: 6rem;
					overflow: hidden;
				}
				.id-card .positive{
					position: absolute;
					left: 0;
					width: 45%;
					height: 100%;
					border: 1px solid #bcbcbc;
				}
				.id-card .reverse{
					position: absolute;
					right: 0;
					width: 45%;
					height: 100%;
					border: 1px solid #bcbcbc;
					margin-right: 5%;
				}
				.id-card img{	
					position: absolute;
					top: 0;
					width: 45%;
					z-index: 10;
					margin: 10% 30%;	
				}
				#uploadForm{
					position: absolute;
					    width: 100%;
					    height: 100%;
				}
				#reverse{
					position: absolute;
					    height: 5rem;
					    width: 10rem;
						top: 0;
						z-index: 20;
					    opacity: 0;
				}
				#positive{
					position: absolute;
					    height: 5rem;
					    width: 10rem;
						top: 0;
						z-index: 20;
						opacity: 0;
				}
				#positive-img{
					margin:0;
					z-index: 15;
					width: 100%;
					height: 100%;
				}
				#reverse-img{
					margin:0;
					z-index: 15;
					width: 100%;
					height: 100%;
				}
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="images/return.png" ></a>
			<a class="top-logo"><img src="images/logo.png" ></a>
			<h1 class="mui-title">	
					Aitimt 爱计时</h1>
			<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
			<div id="popover" class="mui-popover">
			  <ul class="mui-table-view">
			    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
			  </ul>
			</div>
		</header>
		<!-- 公共头部end -->
		
		<div class="mui-content">
		
			<div style="font-size: 20px;color: #e94709;margin:3% 0 3% 5%;font-size: 520;" >
				注册摄影师
				<div class="circle"></div>
				<div class="circle circle-active">........</div>
				<div class="circle circle-active">........</div>
			</div>
			<div class="entry-message">
				<p>身份证(拍照上传正反两面)*:</p>
				<div class="id-card">
						 <form id="uploadForm" enctype="multipart/form-data" >							
							 <div class="positive">
								  <img id="positive-img" >
							 <input  type="file" name="positive" id="positive" onchange="positiveUpload();" accept="image/*" capture="user" multiple="multiple"/>
							 <img src="images/positive.png" />
							 </div>
							 <div class="reverse">
								 <img id="reverse-img" >
								  <input  type="file" name="reverse" id="reverse" onchange="reverseUpload();" accept="image/*" capture="user" multiple="multiple"/>
							 	<img src="images/reverse.png"/> 
							 </div>
								</form>
				 	
				</div>
			
				<p style="margin-top: 35%;">邮箱*:</p>
				<input type="text" name="email" placeholder="请输入邮箱" id="email" value="" />
				<p>常住城市*:</p>
				<input type="text" name="city" placeholder="请填写城市(如广州市)" id="city" value=""/>
				<p>擅长拍摄项目*:</p>
				<input type="text" name="code" placeholder="如路跑/越野/骑车等" id="code" value="" />
			</div>	
		</div>
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" href="recruit3.html">
				<span class="mui-tab-label">下一步</span>
			</a>	
		</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
			  function positiveUpload() {
			        var $pic = document.querySelector("#positive");//上传出发按钮
			        var $img = document.querySelector("#positive-img");
			
			        var file = $pic.files[0];//获取file对象单张
			        var reader = new FileReader();//创建filereader对象
			        reader.readAsDataURL(file);//转换数据
			        reader.onload = function (e) {//加载ok时触发的事件
			            $img.removeAttribute("src");
			
			            $img.setAttribute("src", e.target.result);
			            var $test = document.querySelector("#positive-img");
			        };
			    }
			function reverseUpload() {
			      var $pic = document.querySelector("#reverse");//上传出发按钮
			      var $img = document.querySelector("#reverse-img");
						
			      var file = $pic.files[0];//获取file对象单张
			      var reader = new FileReader();//创建filereader对象
			      reader.readAsDataURL(file);//转换数据
			      reader.onload = function (e) {//加载ok时触发的事件
			          $img.removeAttribute("src");
						
			          $img.setAttribute("src", e.target.result);
			          var $test = document.querySelector("#reverse-img");
			      };
			  }
			   
      
		</script>
	
	</body>
	
</html>
